<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第七章</title>
    <link rel="stylesheet" type="text/css" href="static/css/chater7-1.css">
    <style>
        /*当且仅当style 元素出现在link 元素
后面的时候，嵌入样式表中的样式才会覆盖
外部样式表中的样式 */
        span{
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 理解继承 -->
    <div>
        <h1>The Ephemeral Blue Flax</h1>
        <img src="static/imgs/bg0.png" width="110"
             height="89" alt="Blue Flax (Linum lewisii)"/>
        <p>I am continually <em>amazed</em>
            at the beautiful, delicate Blue Flax
            that somehow took hold in my garden.
            They are awash in color every morning,
            yet not a single flower remains
            by the afternoon. They are the very
            definition of ephemeral.</p>
        <p><small>&copy; Blue Flax Society.
        </small></p>
        <span>这是一个普通的</span>
        <span class="example-0">这是带有一个类名的</span>
        <!--属性里面的样式优先级最高-->
        <span class="example-1 example-2 " style="font-size: 26px;">这是带有两个类名的</span>
    </div>

</body>
</html>